<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<script src="../js/mui.js"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</head>
	<style>
		#box_content {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0.625rem 0.9375rem;
		}
		
		#box_content .cont1 {
			width: 50%;
		}
		
		#box_content .cont1>img {
			width: 11rem;
			height: 8rem;
		}
		
		#box_content .cont1>h4 {
			width: 10rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		#box_content .cont1 {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">更多</h1>
		</header>
		<!-- 学习手册 -->
		<div class="mui-content box">
			<!-- 推荐文章 -->
			<ul class="mui-table-view know" style="margin-bottom: 50px; margin-top: 0;">
				<div id="box_content">
					<!-- <div class="cont">
							<img src="./images/add.png" alt="">
							<h4>title</h4>
							<p>time</p>
						</div> -->
				</div>
			</ul>
		</div>
	</body>
	<script>
		// 学习手册接口
		student()
		function student() {
			mui.ajax('http://192.168.0.111:3000/knowledge/know', {
				dataType: 'json', //服务器返回json格式数据
				type: 'get', //HTTP请求类型	              
				success: function(res) {
					let data = res.data
					data.forEach(item=>{
						let module = `
							<div class="cont1">
								<img src="${item.img}" alt="">
								<h4>${item.title}</h4>
								<p>${item.time}</p>
							</div>
						`
						$('#box_content').append(module)
						
						// 点击进入详情页
						$('.cont1').on('tap',function(){
							window.location.href = 'know.html'
						})
					})
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					console.log(type);
				}
			});
		}
	</script>
</html>